import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Pie } from '@ant-design/plots';

const DemoPie = () => {
  const data = [
    {
      count: 43,
      univ_name: "东华理工大学"
    },
    {
      count: 25,
      univ_name: "南昌大学"
    },
    {
      count: 25,
      univ_name: "南昌航空大学"
    },
    {
      count: 21,
      univ_name: "华东交通大学"
    },
    {
      count: 20,
      univ_name: "江西理工大学"
    },
    {
      count: 1,
      univ_name: "江西泰豪动漫职业学院"
    },
    {
      count: 1,
      univ_name: "江西中医药大学"
    },
    {
      count: 1,
      univ_name: "萍乡学院"
    },
    {
      count: 1,
      univ_name: "江西工业职业技术学院"
    },
    {
      count: 1,
      univ_name: "江西洪州职业学院"
    }
  ];
  const config = {
    appendPadding: 10,
    data,
    angleField: 'count',
    colorField: 'univ_name',
    radius: 0.9,
    label: {
      type: 'inner',
      offset: '-30%',
      style: {
        fontSize: 14,
        textAlign: 'center',
      },
    },
    interactions: [
      {
        type: 'element-active',
      },
    ],
  };
  return <Pie {...config} />;
};

export default DemoPie
